<template>
  <div class="information">
    <div class="header">
      <el-tabs @tab-change="tabChange" v-model="activeName">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="未回复" :name="1"></el-tab-pane>
        <el-tab-pane label="已回复" :name="2"></el-tab-pane>
      </el-tabs>
      <el-input @keydown.enter="search" v-model="searchVal" size="large" placeholder="请输入名称"
        style="width: 360px;height: 36px;position: relative;">
        <template #suffix>
          <el-icon style="cursor: pointer;" @click="search">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div v-loading="listLoading" class="information-list">
      <el-scrollbar view-style="padding-right: 32px;" height="100%">
        <div v-for="(infoItem, inforIndex) in informationList" :key="inforIndex" class="information-item">
          <div class="user-info">
            <img src="@/assets/images/personal-center/default_avatar.png">
            <span class="name">用户123456</span>
          </div>
          <div class="infordesc">{{ infoItem.content }}</div>
          <div class="other">
            <div class="date">发布于{{ infoItem.createTime }}</div>
            <div v-if="!infoItem.answer" class="reply flex-center" @click="openReply(infoItem)">回 复</div>
          </div>
          <div style="position: relative;">
            <el-input v-show="infoItem.isExpand" v-model="infoItem.answerInput" class="textarea" :rows="5"
              type="textarea" />
            <el-popconfirm @confirm="reply(infoItem)" title="是否发布内容？">
              <template #reference>
                <el-button v-show="infoItem.isExpand" class="fabu">发布</el-button>
              </template>
            </el-popconfirm>
          </div>
          <div v-if="infoItem.answer" class="reply">
            <div class="reply-header">
              <span>回复</span>
              <span>{{ moment(infoItem.answerTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </div>
            {{ infoItem.answer }}
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="pagination">
      <el-pagination :total="pager.total" v-model:current-page="pager.pageIndex" :page-size="pager.pageSize"
        @current-change="proxyFun" prev-text="上一页" next-text="下一页" layout="prev, pager, next" background />
    </div>
  </div>
</template>
<script>
export default { name: 'Information' }
</script>
<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import usePager from '@/hooks/usePager.js'
import moment from '@/plugins/moment.js'
import { http } from '@/utils/http/index.js'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/modules/auth';
const authStore = useAuthStore()

const searchVal = ref('')
const activeName = ref('')

const informationList = ref([])

// 分页钩子
const { pager, listLoading, proxyFun } = usePager(10, '/Preach/GetPreachConsultList')
const params = ref({
  dfi: {},
  uid: authStore.userInfo.expertId ?? authStore.userInfo.uid
})
const getList = () => {
  listLoading.value = true
  proxyFun(params.value).then(res => {
    res.result.dataLst.forEach(item => {
      item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm')
      item.answerInput = ''
      item.isExpand = false
    })
    informationList.value = res.result.dataLst
  }).finally(() => listLoading.value = false)
}
// 初始化列表
getList()

// 检索
const search = () => {
  pager.pageIndex = 1
  params.value = getParams()
  getList()
}


const getParams = () => {
  const temp = {
    dfi: {
      logic: 0,
      filters: [
        { field: 'content', operator: 0, value: searchVal.value },
      ]
    },
    uid: authStore.userInfo.expertId ?? authStore.userInfo.uid
  }
  // 未回复
  if (activeName.value == 1) temp.dfi.filters.push({ field: 'answer', operator: 8, value: null })
  // 已回复
  if (activeName.value == 2) temp.dfi.filters.push({ field: 'answer', operator: 9, value: '' })

  return temp
}
const tabChange = () => {
  pager.pageIndex = 1
  params.value = getParams()
  getList()
}

const openReply = (item) => {
  item.isExpand = !item.isExpand
}

/**回复咨询信息 */
const reply = (item) => {
  http.$POST('/Preach/AnswerPreachConsult', { Answer: item.answerInput, Id: item.id }).then(res => {
    if (res.isError) return
    ElMessage.success(res.message)
    item.answer = item.answerInput
    item.answerTime = moment().format('YYYY-MM-DD HH:mm')
    item.isExpand = false
  })
}
</script>
<style lang='scss' scoped>
.information {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 21px 12px;
  padding-right: 0;
  display: flex;
  flex-direction: column;

  .header {
    padding-left: 12px;
    padding-right: 32px;
    padding-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    :deep(.el-tabs) {
      .el-tabs__nav-wrap::after {
        background-color: transparent;
      }
    }
  }

  .information-list {
    flex: 1;
    height: 0;
    padding-left: 10px;
    padding-top: 20px;

    .information-item {
      border-bottom: 1px solid #EFEFEF;
      margin-bottom: 20px;
      padding-bottom: 10px;

      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        img {
          width: 30px;
          height: 30px;
        }

        .name {
          margin-left: 16px;
          font-size: 16px;
          font-weight: normal;
          color: #2E2E2E;
        }
      }

      .infordesc {
        word-break: break-all;
        font-size: 16px;
        font-weight: 500;
        color: #383838;
      }

      .other {
        display: flex;
        justify-content: space-between;
        margin: 16px 0 17px;

        .reply {
          width: 66px;
          height: 26px;
          border-radius: 12px;
          color: #71352E;
          font-size: 12px;
          border: 1px solid #71352E;
          cursor: pointer;
          user-select: none;
        }


        .date {
          font-size: 12px;
          font-weight: normal;
          color: #999999;
        }
      }

      .textarea {
        margin-bottom: 10px;

        :deep(.el-textarea__inner) {
          background-color: #F8F8F8;
        }
      }

      .reply {
        padding: 11px 16px;
        background: #F8F8F8;

        .reply-header {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          font-weight: normal;
          color: #999999;
          margin-bottom: 18px;
        }
      }

      .fabu {
        position: absolute;
        bottom: 20px;
        right: 8px;
      }
    }
  }

  .pagination {
    padding-top: 30px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>